import React, { Component } from "react";
import PropTypes from "prop-types";
import { getMovieData } from "./data";
import "./index.css";

class Time extends Component {
  state = {
    nowTime: new Date().toLocaleDateString() + new Date().toLocaleTimeString(),
  };
  timer = null;
  componentDidMount() {
    this.timer = setInterval(() => {
      console.log("时间更新了！！！");
      this.setState({
        nowTime:
          new Date().toLocaleDateString() + new Date().toLocaleTimeString(),
      });
    }, 1000);
  }
  componentWillUnmount() {
    console.log("timer 销毁啦！！");
    clearInterval(this.timer);
  }
  render() {
    return <div>当前时间 {this.state.nowTime}</div>;
  }
}

// LIST 组件
class List extends Component {
  handleClickItem(item) {
    this.props.onClickDetail(item);
  }
  static propTypes = {
    onClickDetail: PropTypes.func.isRequired,
    listData: PropTypes.array.isRequired,
  };
  render() {
    return (
      <>
        <div className="list-wrapper">
          {this.props.listData.map((item) => (
            <div
              className="list-item"
              key={item.id}
              onClick={() => this.handleClickItem(item)}
            >
              <img className="item-pic" src={item.cover} alt="电影图片" />
              <div className="item-title">{item.title}</div>
            </div>
          ))}
        </div>
      </>
    );
  }
}

// 详情组件
class Detail extends Component {
  state = {
    nowImgCover: "",
  };
  static propTypes = {
    itemData: PropTypes.object,
  };
  static getDerivedStateFromProps(nextProps, prevState) {
    const { itemData } = nextProps;
    return {
      nowImgCover: `宽：${itemData.cover_x}px，高：${itemData.cover_y}px`,
    };
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (
      JSON.stringify(nextProps.itemData) !== JSON.stringify(this.props.itemData)
    ) {
      return true;
    }
    return false;
  }

  render() {
    console.log("详情组件render啦！");
    const { cover, rate, title } = this.props.itemData;
    if (!cover) {
      return null;
    }
    return (
      <div className="detail-wrapper">
        <img className="detail-pic" src={cover} alt="" />
        <div className="detail-title">分数：{rate}</div>
        <div className="detail-title">名称：{title}</div>
        <div className="detail-title">{this.state.nowImgCover}</div>
      </div>
    );
  }
}

// 基础组件
class Index extends Component {
  state = {
    showTime: true,
    listData: [],
    itemData: {},
  };
  changeTimeShowStatus() {
    this.setState({ showTime: !this.state.showTime });
  }
  componentDidMount() {
    getMovieData().then((res) => this.setState({ listData: res.data }));
  }
  handleDetail(detailData) {
    this.setState({ itemData: detailData });
  }
  render() {
    return (
      <div>
        <h1>电影列表</h1>
        <div className="time-wrapper">
          {this.state.showTime && <Time />}
          <button onClick={() => this.changeTimeShowStatus()}>
            修改时间显示状态
          </button>
        </div>
        <List
          listData={this.state.listData}
          onClickDetail={(data) => this.handleDetail(data)}
        />
        <Detail itemData={this.state.itemData} />
      </div>
    );
  }
}

export default Index;
